import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import './Header.css';

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const location = useLocation();

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  const isActive = (path) => {
    return location.pathname === path;
  };

  return (
    <header className="header">
      <div className="container">
        <div className="header-content">
          <div className="logo">
            <Link to="/mnadmin">
              <h1>灵动无界</h1>
            </Link>
          </div>
          
          <nav className={`nav ${isMenuOpen ? 'nav-open' : ''}`}>
            <ul className="nav-list">
              <li><Link to="/mnadmin" className={`nav-link ${isActive('/mnadmin') ? 'active' : ''}`}>首页</Link></li>
              <li><Link to="/products" className={`nav-link ${isActive('/products') ? 'active' : ''}`}>产品中心</Link></li>
              <li><Link to="/news" className={`nav-link ${isActive('/news') ? 'active' : ''}`}>行业资讯</Link></li>
              <li><Link to="/solutions" className={`nav-link ${isActive('/solutions') ? 'active' : ''}`}>解决方案</Link></li>
              <li><Link to="/downloads" className={`nav-link ${isActive('/downloads') ? 'active' : ''}`}>资料下载</Link></li>
              <li><Link to="/about" className={`nav-link ${isActive('/about') ? 'active' : ''}`}>关于我们</Link></li>
              <li><Link to="/contact" className={`nav-link ${isActive('/contact') ? 'active' : ''}`}>联系我们</Link></li>
            </ul>
          </nav>

          <div className="header-actions">
            <button className="menu-toggle" onClick={toggleMenu}>
              <span></span>
              <span></span>
              <span></span>
            </button>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;
